<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="static/jq/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 100%;
            height: 100%;
            background: url("img/index-gb.png") center center no-repeat;
            user-select:none;
        }
        .box-small {
            display: flex;
            justify-content: space-between;
            width: 84%;
            height: 85%;
            background-color: #ffffff;
            /*阴影效果*/
            box-shadow: -2px 0px 21px 0px rgba(190, 190, 190, 0.56);
            border-radius: 20px;
        }
        .box-small-left {
            width: 52%;
            height: 100%;
            background: url("img/smallbox-left-bg.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .box-small-right {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 48%;
            height: 100%;
        }
        .box-title {
            display: block;
            width: 100%;
            height: 15%;
            text-align: center;
            padding: 30px;
        }
        .box-form {
            width: 100%;
            height: 220px;
            /*background: red;*/
        }
        .box-form label {
            display: flex;
            align-items: center;
            width: 300px;
            height: 40px;
            margin: 20px auto;
            border-radius: 30px;
            border: solid 1px #9b9b9b;
            overflow: hidden;
        }
        label img {
            margin: 5px 20px;
            display: inline-block;
            vertical-align: top;
        }
        label input {
            outline: transparent;
            height: 100%;
            border: none;
            background: transparent;
        }
        .box-form button {
            display: block;
            margin: auto;
            width: 300px;
            height: 40px;
            background: #098dee;
            color: #ffffff;
            border: none;
            border-radius: 30px;
        }
        .other-title {
            width: 400px;
            display: flex;
            margin: auto;
            justify-content: space-between;
            align-items: center;
            color: #666666;
            font-size: 15px;
        }
        .title-line {
            width: 130px;
            height: 2px;
            background-color: #c4c2c1;
        }
        .other-list ul {
            display: flex;
            justify-content: space-between;
        }
        .other-list ul li img {

            width: 40px;
            height: 40px;
            display: block;
            margin: auto;
            opacity: 0.7;
            background: center center no-repeat;
            /*background: #9b9b9b;*/
        }
        .other-list ul li {
            list-style: none;
            padding-top: 20px;
            color: #666666;

        }
        .footer {
            width: 150px;
            height: 30px;
            border: gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #login{
            width: 75px;
            position: fixed;
            margin: 0 0 0 99px;
            text-align: center;
            font-synthesis: style;
            font-size: 17px;
            border-width: 0px 0 4px 0px;
            /* border-style: solid;
            border-color: #0d81e7; */
            padding-bottom: 5px;
        }
        #register{
            width: 75px;
            position: fixed;
            margin: 0 0 0 190px;
            text-align: center;
            font-synthesis: style;
            font-size: 17px;
            border-width: 0px 0 4px 0px;
            /* border-style: solid;
            border-color: #0d81e7; */
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box-small">
        <div class="box-small-left"></div>
        <div class="box-small-right">
            <div class="box-title">
                <h2>Hi</h2>
                <h2>欢迎登录“知乎”的网页</h2>
            </div>
            <div style="width: 100%;margin-top: -12px;">
                <div id="login">
                    <span style="cursor: pointer">密码登录</span>
                </div>
                <div id="register">
                    <span style="cursor: pointer">注册账号</span>
                </div>
            </div>
            <div class="box-form">
                <div id="div-login" style="display: block;">
                    <form action="" method="">
                        <label>
                            <img src="img/user-icon.png" alt="">
                            <input type="text" name="" id="login-text" value="" placeholder="用户名" />
                        </label>
                        <label>
                            <img src="img/password-icon.png" alt="">
                            <input type="password" name="" id="login-password" value="" placeholder=" 密码" />
                        </label>
                        <button type="button" style="cursor: pointer" id="signinBtn">登录</button>
                    </form>
                </div>

                <div id="div-register" style="display: none;">
                    <form action="" method="">
                        <label>
                            <img src="img/user-icon.png" alt="">
                            <input type="text" name="" id="register-text" value="" placeholder="手机号注册" />
                        </label>
                        <label>
                            <img src="img/password-icon.png" alt="">
                            <input type="password" name="" id="register-password" value="" placeholder="设置密码" />
                        </label>
                        <button type="button" style="cursor: pointer" id="registerBut">注册</button>
                    </form>
                </div>
            </div>
            <div class="other">
                <div class="other-title">
                    <div class="title-line"></div>
                    <p>其他方式登陆</p>
                    <div class="title-line"></div>
                </div>
                <div class="other-list">
                    <ul>
                        <li style="cursor: pointer">
                            <a href="www.baidu.com"><img src="img/list-qq.png"></a>
                            <span>第三方登陆</span>
                        </li>
                        <li style="cursor: pointer">
                            <a href=""><img src="img/list-weixin.png"></a>
                            <span>第三方登陆</span>
                        </li>
                        <li style="cursor: pointer">
                            <a href=""> <img src="img/list-weibo.png"></a>
                            <span>第三方登陆</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="box-footer">
        <!--<h1></h1>-->
    </div>
</div>
<script>
    $(function(){
        //注册
        $("#registerBut").on('click',function (){
            let registertext = $("#register-text").val();
            let registerpassword = $("#register-password").val();
            console.log(registertext);
            console.log(registerpassword);
            if(registertext.trim() == ""){
                alert("请输入注册的用户名！");
                return;
            }
            if(registerpassword.trim() == ""){
                alert("请输入注册密码！");
                return;
            }
            $.ajax({
                async:true,
                url:'http://localhost:8080/demo05/qian/user?ac=registerReview',
                type:"post",
                data:{username:registertext},
                dataType:"json",<%--响应内容的类型--%>
                success:function (pb){
                    if(pb.status == 500){
                        console.log(pb);
                        alert("该账号已注册...");
                        return;
                    }else if(pb.status == 200){
                        $.ajax({
                            async:true,<%-- 异步提交，默认true --%>
                            url:'http://localhost:8080/demo05/qian/user?ac=register',
                            type:"post",
                            data:{username:registertext,password:registerpassword},
                            dataType:"json",<%--响应内容的类型--%>
                            success:function (rr){
                                if(rr.status == 200){
                                    alert("注册成功！");
                                    sessionStorage.setItem("username",rr.data.user_name);
                                    sessionStorage.setItem("password",rr.data.password);
                                    location.href = "qian/toqian?ac=index";
                                    return;
                                }
                            }
                        });
                    }
                }
            });
        });
        //登录
        $("#signinBtn").on('click',function (){
            let logintext = $("#login-text").val();
            let loginpassword = $("#login-password").val();
            console.log(logintext);
            console.log(loginpassword);

            if(logintext.trim() == ""){
               alert("请输入正确的用户名！");
               return;
            }
            if(loginpassword.trim() == ""){
                alert('请输入正确的密码！！');
                return;
            }

            $.ajax({
                async:true,<%-- 异步提交，默认true --%>
                url:'http://localhost:8080/demo05/qian/user?ac=toHomePage',
                type:"post",
                data:{  username:logintext,
                        password:loginpassword
                    },
                dataType:"json",<%--响应内容的类型--%>
                success:function (pb){
                    if(pb.status == 500){
                        alert("请输入正确的密码！")
                        return;
                    }

                    alert("登陆成功！");
                    sessionStorage.setItem("username",pb.data.user_name);
                    sessionStorage.setItem("password",pb.data.password);
                    sessionStorage.setItem("id",pb.data.id);

                    location.href = "qian/toqian?ac=index";
                    return;
                }
            });
        });
        let login = $("#login");
        login.css("border-style","solid");
        login.css("border-color","#0d81e7");

        $("#login").on("click",function(){
            $("#div-login").css("display","block");
            $("#div-register").css("display","none");

            let login = $("#login");
            login.css("border-style","solid");
            login.css("border-color","#0d81e7");

            let register = $("#register");
            register.css("border-style","");
            register.css("border-color","");
        })
        $("#register").on("click",function(){
            $("#div-login").css("display","none");
            $("#div-register").css("display","block");

            let login = $("#login");
            login.css("border-style","");
            login.css("border-color","");

            let register = $("#register");
            register.css("border-style","solid");
            register.css("border-color","#0d81e7");
        })
    })
</script>
</body>
</html>
